@import './colors.css';
@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	.text-stroke {
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: inherit;
		color: transparent;
	}

	.text-stroke-2 {
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: inherit;
		color: transparent;
	}

	.text-stroke- {
		&chalkboard-20 {
			-webkit-text-stroke-color: theme('colors.chalkboard.10');
		}
		&chalkboard-100 {
			-webkit-text-stroke-color: theme('colors.chalkboard.120');
		}
	}
}

:root {
	@apply bg-chalkboard-10 text-chalkboard-110;
	@apply dark:bg-chalkboard-100 dark:text-chalkboard-10;
	@apply font-sans;
	--green: #29ffa4;
	--chalkboard-10: 99.11% 0 0deg;
}

.reverse {
	@apply bg-chalkboard-100 text-chalkboard-10;
	@apply dark:bg-chalkboard-10 dark:text-chalkboard-110;
}

body {
	scrollbar-width: thin;
	scrollbar-color: theme('colors.chalkboard.30') theme('colors.chalkboard.10');
}

@media screen and (prefers-color-scheme: dark) {
	body {
		scrollbar-color: theme('colors.chalkboard.70') theme('colors.chalkboard.90');
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	@apply font-bold;
}

input {
	@apply bg-transparent;
}

@layer utilities {
	.text-3 {
		@apply text-chalkboard-50 dark:text-chalkboard-70;
	}
	.divider {
		@apply border-chalkboard-30 dark:border-chalkboard-80;
	}
}
